<template>
  <el-dialog title="生产订单详情" width="700px" :model-value="modelValue" @close="commEvent.onClose">
    <el-form ref="formRef" label-suffix="：">
      <el-row :gutter="20">
        <el-col :span="12">
          <el-form-item label="生产订单"> {{ props.rows?.code }}</el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="所属厂区"> {{ factorys.find(item => item.value === props.rows?.factoryId)?.label }} </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="所属产线">
            {{ lines.find(item => item.value === props.rows?.lineId)?.label }}
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="生产版本"> {{ props.rows?.version }} </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="物料号"> {{ props.rows?.materialNo }} </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="排产数量"> {{ props.rows?.orderCnt }} </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="完工数量"> {{ props.rows?.produceCnt }} </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="能耗"> {{ props.rows?.powerCnt }} </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="产品名称"> {{ props.rows?.prodName }} </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="责任人"> {{ props.rows?.personCharge }} </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="更新人"> {{ props.rows?.updateBy }} </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="更新时间"> {{ props.rows?.updateTime }} </el-form-item>
        </el-col>
      </el-row>
    </el-form>
    <template #footer>
      <div style="text-align: center">
        <el-button type="primary" @click="commEvent.onEnter">确定</el-button>
      </div>
    </template>
  </el-dialog>
</template>

<script setup lang="ts">
import { nextTick, PropType, ref, watch } from "vue"
import { FormInstance } from "element-plus"
import { EnumProps } from "@/components/ProTable/interface"
import { SystemSpace } from "@/api/interface/order"
const props = defineProps({
  modelValue: Boolean,
  rows: { type: Object as PropType<SystemSpace.orderPage>, default: () => {} },
  factorys: { type: Array as PropType<EnumProps[]>, default: () => [] },
  lines: { type: Array as PropType<EnumProps[]>, default: () => [] }
})
const emit = defineEmits(["update:modelValue", "refresh"])
// 参数
const formRef = ref<FormInstance>() // 表单实例
// 事件集合
const commEvent = {
  // 关闭弹窗
  onClose: () => {
    emit("update:modelValue", false)
  },
  // 确定
  onEnter: () => {
    commEvent.onClose()
  }
}
watch(
  () => props.modelValue,
  val => {
    if (val) {
      nextTick(() => {
        console.log("弹窗打开，数据为：", props.rows)
        console.log("厂区数据：", props.factorys)
        console.log("产线数据：", props.lines)
      })
    }
  }
)
</script>

<style lang="scss" scoped></style>
